<template>
  <div class="form">
    <div class="title">
      <span>新闻头条管理系统</span>
    </div>
    <el-form  ref="form" :rules="rules" :model="user" label-width="80px">
  <el-form-item class="item" prop='mobile'>
    <el-input v-model="user.mobile"
    placeholder="请输入电话号"
     prefix-icon="iconfont icon-shouji"></el-input>
  </el-form-item>
    <el-form-item prop="code">
    <el-input v-model="user.code"
     placeholder="请输入验证码"
     prefix-icon="iconfont icon-yanzhengma"></el-input>
  </el-form-item>
  <el-form-item prop="agrees">
    <el-checkbox v-model="user.checked" >我已阅读并同意协议和隐藏条款</el-checkbox>
  </el-form-item>
    <el-form-item>
    <el-button type='primary'
     :disabled='!user.checked'
      @click="login"
       :loading="loadingbutton">登陆</el-button>
  </el-form-item>
    </el-form>
  </div>
</template>

<script>
  export default {
    name:'login',
    data () {
      return {
        user:{
           mobile:'13911111111',
           code:'246810',
           checked:false
        },
        rules:{
          mobile:[           
            { required: true, message: '请输入电话号码', trigger: 'blur' },
            { pattern: /^1[0-9]\d{6,}$/, message: '请输入正确的手机号码' }
          ],
          code:[
            { required: true, message: '请输入验证码', trigger: 'blur' },
            { pattern: /^[0-9]\d{5,}$/, message: '请输入正确验证码' }
          ]
        },
    
        loadingbutton:false
      }
    },
    methods: {
    async  login(){
      try{
      let result= await this.$http({
       method:'post',
       url:'/mp/v1_0/authorizations',
       data:this.user
     })
     this.loadingbutton=false
     const status=result.status
    if(status === 201){
      this.$message({
          message: '登陆成功',
          type: 'success'
        });
      window.sessionStorage.setItem('token',result.data.data.token)
      this.$router.push('/home')
      console.log(result)
     
    }
     }catch{
        this.$message.error('登陆失败,账号或验证码错误!');
        this.loadingbutton=false
      }
    }}
  }
</script>

<style lang='less' scoped>
 .form{
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   display: flex;
   
   justify-content: center;
   align-items: center;
   background: url('~assets/img/login_bg.jpg') no-repeat;
   background-size:cover;
   
   .el-form{
     width: 500px;
     height: 300px;
     border-radius: 5px;
     margin-right: 280px;
     padding: 50px 50px 50px 0px; 
     background-color: #fff;
     min-width: 300px;
   }
   .el-button{
     font-size: 20px;
     width: 100%;
   }
   .item{
     margin-top:50px;
   }
   .title{
     position: relative;
     top: -150px;
     left: 400px;
     font-size: 32px;
     font-weight: bold;
   }
   }

</style>